// 导入 useState 的函数
import React, { useState, useEffect } from 'react';

// 定义一个组件-函数组件
export const Counter = () => {
  // 和状态挂钩🪝
  const [count, setCount] = useState(1);

  // 渲染完毕后，执行的操作
  useEffect(() => {
    // 告诉 react 我要执行的副作用
    document.title = count;
  });

  // 箭头函数表达式
  const handleClick = (e) => {
    console.log(e);
    // 修改组件状态，要通过 setCount 函数
    // count = 10; // 不能直接修改
    // setCount(10);
    setCount(count + 1);
  };

  return (
    <div>
      <h3>我是使用hooks的组件</h3>
      <h1>{count}</h1>
      <button onClick={handleClick}>+1</button>
    </div>
  );
};

export class CounterClass extends React.Component {
  state = {
    count: 1,
  };

  handleClick = (e) => {
    console.log(e);

    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }

  componentDidMount() {
    document.title = this.state.count;
  }

  componentDidUpdate() {
    document.title = this.state.count;
  }
}
